<template>
  <div class="scroll-container">
    <transition name="fade">
      <div class="scroll-item" :key="currentIndex">
        <div class="itemsBox">
          <img class="images" :src="tempData.imageList[currentIndex].imageUrl" alt="" />
          <p class="texts">{{ tempData.imageList[currentIndex].text }}</p>
          <p class="endText">刚刚</p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  const props = defineProps({
    // 选中的当前组件参数
    compObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const tempData: any = ref({})
  const currentIndex = ref(0)
  const startScrolling = () => {
    setInterval(() => {
      currentIndex.value = (currentIndex.value + 1) % tempData.value.imageList.length
    }, 3000) // 每2秒切换
  }
  watch(
    () => props.compObj,
    (newVal, oldVal) => {
      tempData.value = JSON.parse(JSON.stringify(newVal))
    },
    { immediate: true, deep: true }
  )
  onMounted(() => {
    startScrolling()
  })
</script>

<style>
  .scroll-container {
    height: 50px; /* 根据需要调整高度 */
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 20px;
    z-index: 1000;
  }

  .scroll-item {
    height: 50px; /* 与容器高度相同 */
    line-height: 50px; /* 垂直居中 */
    .itemsBox {
      height: 30px;
      display: flex;
      align-items: center;
      padding: 4px 6px;
      box-sizing: border-box;
      background-color: #98989852;
      border-radius: 20px;
      .images {
        width: 22px;
        height: 22px;
        border-radius: 50%;
      }
      .texts {
        font-size: 12px;
        line-height: 30px;
        color: #000;
        margin-left: 6px;
      }
      .endText {
        margin-left: 16px;
        font-size: 12px;
        line-height: 30px;
        color: #000;
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
</style>
